<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Event Demo</title>
</head>

<body>
    <p class="demo">hello</p>
    <script>
        // js file
        document.addEventListener("DOMContentLoaded", function () {
            console.log("DOMContentLoaded event");
        });
        window.addEventListener('load', function () {
            console.log('window onload');
        });
        console.log("script excuting, state is " + document.readyState);
    </script>
    <script>
        setTimeout(function () {
            document.querySelector(".demo").style.color = "red";
            console.log("element painting and the state is " + document.readyState);
        }, 2000);


    </script>
</body>

</html>